<template>
  <div class="ek-search" :class="size">
    <el-row>
      <el-col :span="8" v-for="item in params" :key="item.column">
        <div class="search-item" >
          <label>{{ item.label }}</label>
          <div class="search-item-flex"  v-if="item.type == 'Input'">
            <ekInput v-model="searchData[item.column]" @keyup.enter="search" :size="size"/>
          </div>
          <div class="search-item-flex"  v-else-if="item.type == 'Select'">
            <ekSelect
              :size="size"
              v-model="searchData[item.column]"
              :autoInit="item.autoInit"
              :url="item.url"
              :dimCode="item.dimCode"
              :options="item.options"
              :multiple="true"
              @keyup.enter="search"
            /> 
          </div>
          <div class="search-item-flex"  v-else-if="item.type == 'SelectModel'">
            <ekSelectModel
              :size="size"
              v-model="searchData[item.column]"
              :url="item.url"
              :modelCode="item.modelCode"
              :options="item.options"
              :mapping="item.mapping"
              :multiple="true"
              @keyup.enter="search"
            /> 
          </div>
          <div class="search-item-flex" v-else-if="item.type == 'DatePicker'">
            <ekDatePicker 
              :size="size"
              v-model="searchData[item.column][0]" 
              @keyup.enter="search"
            />
            <span>-</span>
            <ekDatePicker 
              :size="size"
              v-model="searchData[item.column][1]" 
              @keyup.enter="search"
            />
          </div>
          <div class="search-item-flex" v-else-if="item.type == 'DateTimePicker'">
            <ekDateTimePicker 
              :size="size"
              v-model="searchData[item.column][0]" 
              @keyup.enter="search"
            />
            <span>-</span>
            <ekDateTimePicker
              :size="size"
              v-model="searchData[item.column][1]" 
              @keyup.enter="search"
            />
          </div>
        </div>
      </el-col>
      <el-col :span="(3 - (params.length % 3)) * 8">
        <div class="search-item search-btn">
          <span></span>
          <el-button @click.stop="reset" plain :size="size">重置</el-button>
          <el-button @click.stop="search" type="primary" :size="size">查询</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, defineEmits } from "vue";
import ekInput from "@/components/form/ekInput/index.vue";
import ekSelect from "@/components/form/ekSelect/index.vue";
import ekSelectModel from "@/components/form/ekSelectModel/index.vue";
import ekDatePicker from "@/components/form/ekDatePicker/index.vue";
import ekDateTimePicker from "@/components/form/ekDateTimePicker/index.vue";
const props = defineProps({
  // 查询参数
  params: {
    type: Array,
    default: [],
  },
  size: {
    type: String,
    default: 'default'
  }
});
// emit
const emit = defineEmits(["search"]);

// 查询表单数据
let searchData = ref({});
// 初始化查询
function initSearch() {
  searchData.value = {}
  props.params.forEach(item => {
    if(item.type == 'Input'){
      searchData.value[item.column] = '';
    } else if(item.type == 'Select' || item.type == 'SelectModel'){
      searchData.value[item.column] = [];
    } else if(['DatePicker','DateTimePicker'].includes(item.type)){
      searchData.value[item.column] = [];
    }
  });
}
// 初始化
initSearch();

// 重置
function reset() {
  initSearch();
}
// 点击查询
function search() {
  let data = handleSearch(searchData.value);
  emit("search", data);
};

// 查询数据处理
function handleSearch(searchData) {
  let arr = [];
  if(Object.keys(searchData).length){
    for(let i in searchData){
      let type = getSearchDataTypeByKey(i,props.params);
      if(type == 'Input' && searchData[i] ){
        arr.push({
          symbol: 'like',
          paramKey:i,
          paramValue:searchData[i],
        })
      }else if(['Select','SelectModel'].includes(type) && searchData[i]){
        if(searchData[i].length > 0){
          arr.push({
            symbol: 'in',
            paramKey:i,
            paramValue: searchData[i],
          })
        }
        
      }else if(['DateTimePicker'].includes(type) && searchData[i].length){
        
        if(searchData[i][0]){
          arr.push({
            symbol: 'gq',
            paramKey:i,
            paramValue: Math.floor(searchData[i][0]/1000),
          })
         
        }
        if(searchData[i][1]){
          arr.push({
            symbol: 'lq',
            paramKey:i,
            paramValue: Math.floor(searchData[i][1]/1000),
          })
          
        }
      }else if(['DatePicker'].includes(type) && searchData[i].length){
        if(searchData[i][0]){
          arr.push({
            symbol: 'gq',
            paramKey:i,
            paramValue:Math.floor(searchData[i][0]/1000),
          })
          
        }
        if(searchData[i][1]){
          // 将时间戳转换为日期对象
          const date = new Date(searchData[i][1]);
          // 将时间设置为当天的 24:00:00
          date.setHours(0, 0, 0, 0);
          arr.push({
            symbol: 'lq',
            paramKey:i,
            paramValue: Math.floor(date.getTime()/1000) + 24*60*60 -1,
          })
        }
      }
    }
  } 

  return arr;
}

// 获取当前表单类型
function getSearchDataTypeByKey(keys, params)  {
  for(let i in params) {
    if(params[i].column == keys){
      return params[i].type
    }
  }
  return ''
} 

</script>

<style scoped lang="scss">
.ek-search {
  .ek-input,
  .ek-select,
  .ek-textarea {
    width: 100%;
    // max-width: 260px;
  }
  .ek-select {
    :deep(.el-select) {
      width: 100%;
    }
  }
  .ek-date-picker {
    :deep(.el-date-editor.el-input) {
      width: 100%;
    }
  }

  .search-item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    label {
      width: 100px;
      text-align: right;
      margin-right: 10px;
      flex-shrink: 0;
    }
    .search-item-flex {
      width: 100%;
      display: flex;
      align-items: center;
      .ek-date-picker {
        width: 48%;
      }
      span {
        padding: 0 1%;
      }
      
    }
  }
  .search-btn {
    justify-content: flex-end;
  }
  &.small {
    .search-item {
      label {
        width: 80px;
        font-size: 12px;
      }
    }
  }
}
</style>
